<template>
	<view class="content">
		<z-paging ref="paging" v-model="items" @query="handleLoadData">
			<mp-select @handleGetChildId="handleGetChildId" @handleGetId="handleGetId"></mp-select>
			<view class="bg-white padding">
				<uni-easyinput suffixIcon="search" customCss="bg-gray" v-model="keyword" placeholder="请输入内容" @iconClick="handleSearch" :isCenter="true"></uni-easyinput>
			</view>
			<view class="bg-white padding-lr">
				<app-list-item :itemType="type" :item="item" v-for="(item, index) in items" :key="index" @handleHref="handleHref" @handleFavorite="handleFavorite" :showActions="false"></app-list-item>
			</view>
		</z-paging>
	</view>
</template>

<script>
	// 注册自定义导航组件
	import cuCustom from '@/libs/colorui/components/cu-custom.vue';
	
	// 注册模拟信息详情组件
	import appListItem from '@/components/app-list-item.vue';
	
	// 引入门派
	import groups from '@/utils/init/groups.js';
	
	// 引入封装的网络请求
	import { handleRequest } from '@/common/request.js';
	
	const navigationTitles = {
		'1': '配装',
		'2': '加点',
		'3': '技能'
	}
	
	export default {
		components: {
			cuCustom,
			appListItem
		},
		data() {
			return {
				type: 1,
				keyword: '',
				// 信息列表
				items: [],
				id: 0,
				childId: 0,
			}
		},
		onLoad(e) {
			this.type = e.type || 1;
			uni.setNavigationBarTitle({
				title: this.navigationTitle
			})
		},
		computed: {
			typeName() {
				return navigationTitles[this.type];
			},
			navigationTitle() {
				return navigationTitles[this.type] + '大厅';
			},
			groups() {
				return groups;
			},
			groupTitle() {
				return groups[this.id].list[this.childId].full_name;
			}
		},
		methods: {
			// 获取门派的一级ID
			handleGetId(e) {
				this.id = e[0];
				this.childId = 0;
				this.handleLoadData();
			},
			// 获取门派的二级ID
			handleGetChildId(e) {
				this.childId = e;
				this.handleLoadData();
			},
			// 搜索
			handleSearch() {
				this.handleLoadData();
			},
			// 获取数据
			async handleLoadData(pageNo, pageSize) {
				await handleRequest({
					cmd: 'gethalllistbytype',
					nType: this.type,
					sMemPai: this.groupTitle,
					sTitle: this.keyword,
					nPage: pageNo
				}).then(async res => {
					if (res.length === undefined) {
						res = [];
					} else {
						res.map(item => {
							item.avatar = 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg';
							item.subtitle = '';
							if (item.sProgramme) {
								item.sProgramme = JSON.parse(item.sProgramme);
								if (typeof item.sProgramme === 'object') {
									item.subtitle = `${item.sProgramme.level}级 ${this.groupTitle}`
								}
							}
							
							// 存储到本地
							uni.setStorageSync(`nIndex:${this.type}:${item.nIndex}`, item);
						});
					}
					this.$refs.paging.complete(res);
				}).catch(async err => {
					this.$refs.paging.complete(false);
				})
			},
			// 跳转
			handleHref(nIndex) {
				let url = `../index?nIndex=${nIndex}&from=hall`;

				if (this.type == 3) {
					url = `../../jineng/index?nIndex=${nIndex}&from=hall`
				}
				
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	.select_type_panel {
		float: left;
		height: 80rpx;
		width: 100%;
		background-color: #000000;
	}

	.select_type_item {
		float: left;
		width: 100rpx;
		height: 60rpx;
		text-align: center;
		margin: 10rpx;
		border: solid #000000 2rpx;
	}

	.select_type_text {
		margin-top: 10rpx;
		line-height: 60rpx;
		height: 60rpx;
	}

	.unselect_panel {
		background-color: #FFFFFF;
		color: #57BEF2;
		border: solid #808080 1rpx;
	}

	.select_panel {
		border: solid #57BEF2 1rpx;
		background-color: #57BEF2;
		color: #FFFFFF;
	}

	

</style>
